<template>
	<view class="">
		<u-navbar title="我的课程"></u-navbar>
		<!-- 切换 -->
		<view class="top-box u-flex u-row-around u-border-bottom">
			<view class="u-text-center">
				<view class="text" style="line-height: 80rpx;width: 125rpx">全部</view>
				<view class="line" style="background: #FA541C;width: 35%;height: 10rpx;border-radius: 10rpx;margin: 0 auto;"></view>
			</view>
			<view class="u-text-center">
				<view class="text" style="line-height: 80rpx;width: 125rpx">未完成</view>
				<view class="line" style="background: #FA541C;width: 35%;height: 10rpx;border-radius: 10rpx;margin: 0 auto;"></view>
			</view>
			<view class="u-text-center">
				<view class="text" style="line-height: 80rpx;width: 125rpx">已完成</view>
				<view class="line" style="background: #FA541C;width: 35%;height: 10rpx;border-radius: 10rpx;margin: 0 auto;"></view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="">
			<tui-course v-for="(item,idx) in courseList" :key="idx"></tui-course>
		</view>
	</view>
</template>

<script>
	import tuiCourse from '../../../components/tui-course/tui-source.vue';
	export default {
		components: {
			tuiCourse
		},
		data(){
			return{
				courseList:[]
			}
		},
		onLoad() {
			this.initCourseList()
			//var player = new prismplayer({id:"J_prismPlayer",autoplay:false,width:"100%",vid:"${vid}",playauth:"${playAuth}",});
			
		},
		methods:{
			initCourseList(){
				this.$http.getMySubscribeLesson().then(res=>{
					this.courseList = res.data
				})
			}
		}
	}
</script>

<style>
	page{
		background: #FFFFFF;
	}
	.top-box {
		background: #FFFFFF;
		position: sticky;
		top: calc(44px + var(--status-bar-height));
		left: 0;
		right: 0;
		z-index: 999;
	}
</style>
